<template>
  <div>
    <a-card :bordered="false" style="height:100%">
      <div class="table-operator">
        <a-button type="primary" icon="plus" @click="$refs.modal.add()">添加菜单</a-button>
      </div>
      <div v-if="data && data.length">
        <a-table
          class="components-table-demo-nested"
          ref="table" 
          :defaultExpandAllRows="true"
          :columns="columns" 
          :row-key="record => record.id" 
          :data-source="data" 
          :pagination="false" 
          :loading="loading" 
			bordered
          @change="handleTableChange">
          <span slot="icon" slot-scope="text">
            <template v-if="text != null">
              <a-icon :type="text" /> {{ text }}
            </template>
          </span>
          <span slot="action" slot-scope="text, record">
            <template>
              <a @click="handleSubMenu(record)">添加子菜单</a>
              <a-divider type="vertical" />
              <a @click="handleEdit(record)">编辑</a>
            </template>
          </span>
        </a-table>
      </div>
    </a-card>
    <menu-setting-modal ref="modal" @ok="handleOk"></menu-setting-modal>
  </div>

</template>

<script>
  import menuSettingModal from './modules/menuSettingModal'
  
  import {
    getUrl
  } from '@/api/manage'

  export default {
    components: {
      menuSettingModal
    },
    data() {
      return {
        data: [],
        pagination: {size:'small'},
        loading: false,
        columns: [{
            title: '菜单名称',
            dataIndex: 'title'
          },
          {
            title: '菜单唯一键',
            dataIndex: 'name'
          },
          {
            title: '菜单ICON',
            dataIndex: 'icon',
            scopedSlots: { customRender: 'icon' }
          },
          {
            title: '排序',
            dataIndex: 'sort'
          },
          {
            title: '操作',
            scopedSlots: { customRender: 'action' }
          }
        ]
      }
    },
    created() {
      this.fetch()
    },
    methods: {
      handleOk(){
          this.fetch()
      },
      handleSubMenu(record) {
          this.$refs.modal.addSubMenu(record)
      },
      handleEdit (record) {
          this.$refs.modal.edit(record)
      },
      handleTableChange(pagination, filters, sorter) {
        console.log(pagination)
        const pager = { ...this.pagination
        }
        pager.current = pagination.current
        this.pagination = pager
        this.fetch({
          results: pagination.pageSize,
          page: pagination.current,
          sortField: sorter.field,
          sortOrder: sorter.order,
          ...filters,
        })
      },
      fetch(params = {}) {
        console.log('params:', params)
        this.loading = true
        var _this = this
        return getUrl('getMenu', Object.assign(params, this.queryParam))
          .then(data => {
            
            const pagination = { ...this.pagination
            }
            // Read total count from server
            pagination.total = data.result.totalCount
            pagination.showTotal = total => `共 ${total} 条`
            pagination.showQuickJumper = true
            this.loading = false
            this.data = data.result.data
            this.pagination = pagination

          })
      }
    }
  }
</script>
<style>
  .ant-select-dropdown-menu-item-selected,
  .ant-select-dropdown-menu-item-selected:hover {
    color: #52c41a;
    font-weight: 700;
    background-color: #fafafa;
  }
</style>
